<template>
  <div>
    <Card shadow="true">
      <!-- 头部的件数统计 -->
      <div class="top top-self">
        <div class="col-20 bd-r">
          <div class="info">本月交费完成</div>
          <div class="infoNum">{{ success }}个</div>
        </div>
        <div class="col-20 bd-r">
          <div class="info">超期计划</div>
          <div class="infoNum-red">{{ overdue }}个</div>
        </div>
        <div class="col-20 bd-r">
          <div class="info">剩余未交费</div>
          <div class="infoNum-red">{{ noplay }}个</div>
        </div>
        <div class="col-20 bd-r">
          <div class="info">
            即将失效保单
            <Tooltip content="宽限期在45-65天内的保单" placement="top">
              <Icon type="ios-alert-outline" style="color:#000" />
            </Tooltip>
          </div>
          <div class="infoNum-red">{{ sooninvalid }}个</div>
        </div>
        <div class="col-20">
          <div class="info">
            本月困难件
            <Tooltip content="保单交费难度大于等于8级" placement="top">
              <Icon type="ios-alert-outline" style="color:#000" />
            </Tooltip>
          </div>
          <div class="infoNum">{{ difficulty }}个</div>
        </div>
      </div>
      <div class="clearBoth"></div>
    </Card>
    <Card style="margin-top:20px;margin-bottom:20px;">
      <Form :model="superviseForm" ref="superviseForm" :rules="rules" style="display: block;">
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.workStatus" placeholder="工作状态" clearable>
                <Option v-for="item in workStatusList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.workPlanRange" type="daterange" placeholder="工作计划时间段" :editable="false"
                style="width:100%" @on-change="changeWorkPlanRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.workEndRange" type="daterange" placeholder="工作完成时间段" :editable="false"
                style="width:100%" @on-change="changeWorkEndRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.PayableRange" type="daterange" placeholder="应交日时间段" :editable="false"
                style="width:100%" @on-change="changePayableRange"></DatePicker>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.saleChannel" placeholder="销售渠道" clearable>
                <Option v-for="item in saleChannelList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="投保人姓名" v-model="superviseForm.appntName" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="保单号" v-model="superviseForm.applyNo" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.payDifficult" placeholder="交费难度" clearable>
                <Option v-for="item in 11" :key="item" :value="item">{{ item - 1 }}级</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Input placeholder="联系地址" v-model="superviseForm.postaladdress" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <Row>
              <i-col span="11">
                <FormItem>
                  <Input placeholder="应交次数" v-model="superviseForm.payCount" />
                </FormItem>
              </i-col>
              <i-col span="2" style="text-align:center;line-height:30px">-</i-col>
              <i-col span="11">
                <FormItem>
                  <Select v-model="superviseForm.pay" clearable>
                    <Option v-for="item in payWayList" :key="item.key" :value="item.key">{{ item.value }}</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
          </i-col>
          <i-col span="6">
            <Row>
              <i-col span="11">
                <FormItem prop="minFee">
                  <Input placeholder="最低应收保费" v-model="superviseForm.minFee" type="number"
                    @on-blur="decimalConversion(superviseForm.minFee)" />
                </FormItem>
              </i-col>
              <i-col span="2" style="text-align:center;line-height:30px">-</i-col>
              <i-col span="11">
                <FormItem prop="maxFee">
                  <Input placeholder="最高应收保费" v-model="superviseForm.maxFee" type="number"
                    @on-blur="decimalConversion2(superviseForm.maxFee)" />
                </FormItem>
              </i-col>
            </Row>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.shouldPayRange" type="daterange" placeholder="工作录入时间段" :editable="false"
                style="width:100%" @on-change="changeShouldPayRange"></DatePicker>
            </FormItem>
          </i-col>
        </Row>
        <Row style="margin-bottom:10px">
          <i-col span="6">
            <Row>
              <i-col span="11">
                <FormItem prop="beginTime">
                  <Input placeholder="应交日开始天数" v-model="superviseForm.beginTime" type="number" />
                </FormItem>
              </i-col>
              <i-col span="2" style="text-align:center;line-height:30px">-</i-col>
              <i-col span="11">
                <FormItem prop="endTime">
                  <Input placeholder="应交日结束天数" v-model="superviseForm.endTime" type="number" />
                </FormItem>
              </i-col>
            </Row>
          </i-col>
        </Row>
        <Row>
          <Button type="primary" @click="handleSubmit()" style="margin-right:20px" :loading="queryLoading">查询</Button>
          <Button @click="handleReset()">重置</Button>
        </Row>
      </Form>
    </Card>
    <Card>
      <div class="content">
        <Button :type="but[0]" @click="clickButton(0)">全部</Button>
        <Button :type="but[1]" @click="clickButton(1)">本月完成</Button>
        <Button :type="but[2]" @click="clickButton(2)">超期计划</Button>
        <Button :type="but[3]" @click="clickButton(3)">即将失效</Button>
        <Button :type="but[4]" @click="clickButton(4)">困难件</Button>
        <Button :type="but[5]" @click="clickButton(5)">大额件</Button>
        <span>
          <Button type="primary" @click="adjust">
            <Icon type="md-menu" />调整计划
          </Button>
          <Button type="primary" @click="batchDeal" style="margin-left: 10px;">
            <Icon type="md-flash" />批量处理
          </Button>
        </span>
      </div>
      <Table :columns="chargeColumns" :data="chargeData" @on-selection-change="selectionChange"
        @on-sort-change="sortChange" :row-class-name="rowClassName">
        <template slot-scope="{row}" slot="difficulty">
          <div @click="showDialog" style="cursor: pointer;">{{ row.difficulty }}</div>
        </template>
        <template slot-scope="{row}" slot="planstatename">
          <span v-if="row.planstatename == '未服务'">
            <Button style="border-radius: 16px;background-color:rgb(255,141,26);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
          <span v-if="row.planstatename == '服务中'">
            <Button style="border-radius: 16px;background-color:rgb(24,144,255);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
          <span v-if="row.planstatename == '已完成'">
            <Button style="border-radius: 16px;background-color:rgb(67,207,124);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
        </template>
      </Table>
      <Page :total="total" show-sizer show-total style="text-align:right;margin-top:20px" @on-change="pageChange"
        @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeOptions" :current="pageIndex" :page-size="pageSize"
        transfer></Page>
    </Card>
    <Modal footer-hide="true" :value="adjustPlan" :mask-closable="false" @on-visible-change="modalVisibleChange"
      :styles="{ top: '250px' }" width="380">
      <span slot="header" style="color:#fff;font-size:16px">调整计划</span>
      <div class="adjustPlanContent">
        <Row gutter="80">
          <i-col span="15">
            <DatePicker placeholder="指定日期" :editable="false" v-model="adjustPlanForm.adjustPlanDate" style="width:100%">
            </DatePicker>
          </i-col>
          <i-col span="4">
            <Button type="primary" @click="adjustSubmit" :loading="adjustLoading">确认</Button>
          </i-col>
        </Row>
        <Select v-model="adjustPlanForm.workType" placeholder="请指定工作方式" clearable style="width:80%;margin-top:20px">
          <Option v-for="item in workTypeList" :key="item.key" :value="item.key">{{ item.value }}</Option>
        </Select>
      </div>
    </Modal>
    <Modal :value="dialogVisible" :mask-closable="false" footer-hide="true" @on-visible-change="dialogVisibleChange" :styles="{ top: '250px' }" width="580">
      <span slot="header" style="color:#fff;font-size:16px">交费难度</span>
      <div>
        <Table :columns="dialogColumns" :data="dialogData">
          <template slot-scope="{row}" slot="score">
            <div>{{ row.c }}</div>
          </template>
        </Table>
      </div>
    </Modal>
    <div class="contain" ref="mybox">
      <canvas id="myCanvas" width="200" height="100" ref="myCanvas" style="position: absolute;"></canvas>
    </div>
  </div>
</template>

<script>
import util from "../../../util/util";
import { drawSign } from '../../../util/drawSign';
export default {
  props: {
    typeIndex: {
      type: String
    },
    payWayList: {
      type: Array
    },
  },
  data() {
    const validatePremium = (rule, value, callback) => {
      if (value) {
        let reg = /^[0-9][0-9]*$/;
        let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
        let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
        if (reg.test(value)) {
          callback();
        } else if (reg1.test(value)) {
          callback();
        } else if (reg2.test(value)) {
          callback();
        } else {
          callback(new Error("请输入两位小数"));
        }
      } else {
        callback();
      }
      callback();
    };
    const validateMinDay = (rule, value, callback) => {
      const r = /^-?\d+$/
      if (value && (!r.test(value) || value < -60 || value > 65)) {
        callback(new Error('只可录入“-60”到“65”之间的整数'));
      } else {
        if (this.superviseForm.endTime && value && Number(this.superviseForm.endTime) < Number(value)) {
          callback(new Error('应交日开始天数需小于等于应交日结束天数'));
        } else {
          callback();
        }
      }
    };
    const validateMaxDay = (rule, value, callback) => {
      const r = /^-?\d+$/
      if (value && (!r.test(value) || value < -60 || value > 65)) {
        callback(new Error('只可录入“-60”到“65”之间的整数'));
      } else {
        callback();
      }
    };
    return {
      superviseForm: {
        workStatus: "",
        workPlanRange: ["", ""],
        workEndRange: ["", ""],
        PayableRange: ["", ""],
        saleChannel: "",
        appntName: "",
        applyNo: "",
        payCount: "",
        pay: "",
        payDifficult: "",
        minFee: "",
        maxFee: "",
        postaladdress: "",
        shouldPayRange: ["", ""],
        beginTime: null,
        endTime: null
      },
      rules: {
        minFee: [{ validator: validatePremium, trigger: "blur" }],
        maxFee: [{ validator: validatePremium, trigger: "blur" }],
        beginTime: [{ validator: validateMinDay, trigger: "blur" }],
        endTime: [{ validator: validateMaxDay, trigger: "blur" }]
      },
      //本月交费完成
      monthPaid: "0",
      //工作状态下拉框
      workStatusList: [],
      //销售渠道下拉框
      saleChannelList: [],
      //年交
      payList: [],
      //表格
      chargeColumns: [
        {
          type: "selection",
          align: "center",
          fixed: "left",
          width: 60
        },
        {
          title: "保单号",
          key: "contno",
          width: "190",
          fixed: "left"
        },
        {
          title: "投保人",
          key: "appntname",
          align: "center",
          width: "140"
        },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
          width: "140",
          sortable: true,
          sortable: "custom"
        },
        {
          title: "应交次数",
          key: "paycount",
          align: "center",
          width: "120"
        },
        {
          title: "交费难度",
          key: "difficulty",
          align: "center",
          width: "130",
          slot: "difficulty",
        },
        {
          title: "应收保费(元)",
          key: "paymoney",
          align: "center",
          width: "160",
          sortable: true,
          sortable: "custom"
        },
        {
          title: "宽限期剩余天数",
          key: "restdays",
          align: "center",
          width: "140"
        },
        {
          title: "计划工作时间",
          key: "plandatetype",
          align: "center",
          width: "170"
        },
        {
          title: "计划工作方式",
          key: "worktypename",
          align: "center",
          minWidth: 140
        },
        {
          title: "工作状态",
          key: "planstatename",
          align: "center",
          width: "130",
          slot: "planstatename",
          fixed: "right"
        }
      ],
      chargeData: [],
      but: ["primary", "default", "default", "default", "default", "default"],
      // 对话框
      adjustPlan: false,
      adjustPlanForm: {
        adjustPlanDate: "",
        workType: ""
      },
      workTypeList: [],
      selection: [],
      selectLength: "0",
      total: 0,
      pageSizeOptions: [5, 10, 15, 20],
      pageIndex: 1,
      pageSize: 10,
      // 顶部显示
      success: 0,
      difficulty: 0,
      noplay: 0,
      sooninvalid: 0,
      overdue: 0,
      pageObj: "",
      queryLoading: false,
      adjustLoading: false,
      type: 0,
      premorder: 0,
      paytodateorder: 0,
      typeFlag: 0,
      flagIndex: -1,
      historyObj: null,
      dialogVisible: false,
      dialogColumns: [
        {
          title: "因子名称",
          key: "a",
          width: "180",
          align: "center",
        },
        {
          title: "占比",
          key: "b",
          width: "120",
          align: "center",
        },
        {
          title: "分数",
          key: "c",
          width: "120",
          align: "center",
          slot: "score",
        },
        {
          title: "实际值",
          key: "d",
          width: "120",
          align: "center",
        },
      ],
      dialogData: [
        { a: '业务员过往继续率', b: '15%', c: '0', d: '0' },
        { a: '险种产品类别', b: '10%', c: '0', d: '疾病保险' },
        { a: '业务员出勒次数', b: '10%', c: '0', d: '33' },
        { a: '是否有过退保', b: '10%', c: '100', d: '否' },
        { a: '保单交费年限', b: '10%', c: '0', d: '30' },
        { a: '是否在职单类型', b: '5%', c: '100', d: '在职单' },
        { a: '是否重复白保件', b: '5%', c: '0', d: '是' },
        { a: '投保人年龄', b: '5%', c: '0', d: '25' },
        { a: '是否有附加险', b: '5%', c: '100', d: '是' },
        { a: '保单分红水平比', b: '2%', c: '0', d: '' },
        { a: '期交保费', b: '2%', c: '60', d: '7873.19' },
        { a: '出单时业务员司龄', b: '2%', c: '0', d: '3' },
        { a: '是否有过投诉记录', b: '2%', c: '100', d: '否' },
        { a: '是否聘才', b: '2%', c: '100', d: '否' },
        { a: '保单保额是否非整万', b: '2%', c: '100', d: '否' },
        { a: '保单现金价值率', b: '2%', c: '0', d: '' },
        { a: '是否有过理赔记录', b: '2%', c: '0', d: '否' },
        { a: '是否有两张及以上的保单', b: '2%', c: '100', d: '是' },
        { a: '是否发生过账号变更', b: '2%', c: '0', d: '否' },
        { a: '是否有过保单贷款', b: '2%', c: '0', d: '否' },
      ],
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    dialogVisibleChange(val) {
      this.dialogVisible = val;
    },
    //行样式
    rowClassName(row, index) {
      // if (row.facerecordflag == '0' && row.planstatename != "已完成") {
      //   return 'table-row-red1';
      // } else if (row.visitflag == '0' && row.planstatename != "已完成") {
      //   return 'table-row-orange1';
      // }
      return '';
    },

    // 应交日时间段
    changePayableRange(date) {
      // console.log(date)
      this.superviseForm.PayableRange = date;
    },

    // 工作计划时间段
    changeWorkPlanRange(date) {
      console.log(date)
      this.superviseForm.workPlanRange = date;
    },

    // 工作完成时间段
    changeWorkEndRange(date) {
      // console.log(date)
      this.superviseForm.workEndRange = date;
    },

    // 工作录入时间段
    changeShouldPayRange(date) {
      // console.log(date)
      this.superviseForm.shouldPayRange = date;
    },

    // 初始化头部和下拉框
    initial() {
      let obj = {
        index: 1,
        initflag: 0,
        pageSize: 10,
        selecttag: 0, // 0是查全部
        selecttype: 1,
        premorder: 0,
        paytodateorder: 0
      };
      this.api.getWorkListForOrphan(obj).then(res => {
        if (res.code == 200 && res.data != null) {
          if (res.data.basemap.branchtypes.length > 0) {
            this.saleChannelList = res.data.basemap.branchtypes;
          }
          if (res.data.basemap.payintvs.length > 0) {
            this.payList = res.data.basemap.payintvs;
          }
          if (res.data.basemap.planstates.length > 0) {
            this.workStatusList = res.data.basemap.planstates;
          }
          res.data.workbar = {
            "contnums_success": 1,
            "plannums_Overdue": 3,
            "contnums_noplay": 3,
            "contnums_sooninvalid": 0,
            "contnums_difficulty": 0
          }
          if (res.data.workbar) {
            this.success = res.data.workbar.contnums_success;
            this.difficulty = res.data.workbar.contnums_difficulty;
            this.noplay = res.data.workbar.contnums_noplay;
            this.sooninvalid = res.data.workbar.contnums_sooninvalid;
            this.overdue = res.data.workbar.plannums_Overdue;
          }
          if (res.data.basemap.updateworktype) {
            this.workTypeList = res.data.basemap.updateworktype;
          }
        }
      });
      if (this.typeIndex) {
        this.clickButton(this.typeIndex);
      } else {
        this.handleSubmit(-1, 999);
      }
    },

    //表单---保单金额排序asc
    sortChange(column, key, order) {
      if (column.key == "paytodate") {
        this.premorder = 0;
        // 应交日
        if (column.order == "asc") {
          // 升序
          this.paytodateorder = 1;
        } else if (column.order == "desc") {
          // 降序
          this.paytodateorder = 2;
        } else {
          // 默认
          this.paytodateorder = 0;
        }
      }
      if (column.key == "paymoney") {
        this.paytodateorder = 0;
        // 应收保费
        if (column.order == "asc") {
          // 升序
          this.premorder = 1;
        } else if (column.order == "desc") {
          // 降序
          this.premorder = 2;
        } else {
          // 默认
          this.premorder = 0;
        }
      }

      this.handleSubmit(this.flagIndex, 999);
      // console.log(column, key, order);
    },

    //转时间
    timeFormat(time) {
      if (!time) {
        return ''
      }
      let d = new Date(time)
      var y = d.getFullYear();
      var m = d.getMonth() + 1;
      if (m < 10) {
        m = "0" + m;
      }
      var day = d.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return y + "-" + m + "-" + day;
    },

    // 查询
    handleSubmit(index, params) {
      this.$refs.superviseForm.validate(valid => {
        if (valid) {
          if (this.historyObj == null) {
            if (index >= 0) {
              if (this.typeFlag == 0) {
                // console.log("----------默认查询：二次筛选---------["+this.flagIndex+']')
                this.type = 0;
              } else {
                // console.log("----------二次以上查询：二次筛选---------["+this.flagIndex+']')
                this.type = 1;
              }
            } else if (index == -1) {
              // console.log("----------默认查询---------")
              this.type = 0;
              this.typeFlag = 0;
              let arr = [
                "default",
                "default",
                "default",
                "default",
                "default",
                "default"
              ];
              arr[0] = "primary";
              this.but = arr;
              this.flagIndex = 0;
            } else {
              // console.log("---------二次以上查询----------")
              this.type = 1;
              this.typeFlag = 1;
              let arr = [
                "default",
                "default",
                "default",
                "default",
                "default",
                "default"
              ];
              arr[0] = "primary";
              this.but = arr;
              this.flagIndex = 0;
              this.queryLoading = true;
            }
            this.pageIndex = 1;
            this.pageSize = 10;
          }

          let obj = {
            planstate: this.superviseForm.workStatus
              ? this.superviseForm.workStatus
              : null,
            rangeminappointeddate: this.superviseForm.workPlanRange[0] ? this.timeFormat(this.superviseForm.workPlanRange[0]) : null,
            rangemaxappointeddate: this.superviseForm.workPlanRange[1] ? this.timeFormat(this.superviseForm.workPlanRange[1]) : null,
            rangeminfishdate: this.superviseForm.workEndRange[0] ? this.timeFormat(this.superviseForm.workEndRange[0]) : null,
            rangemaxfishdate: this.superviseForm.workEndRange[1] ? this.timeFormat(this.superviseForm.workEndRange[1]) : null,
            rangeminpaytodate: this.superviseForm.PayableRange[0] ? this.timeFormat(this.superviseForm.PayableRange[0]) : null,
            rangemaxpaytodate: this.superviseForm.PayableRange[1] ? this.timeFormat(this.superviseForm.PayableRange[1]) : null,
            rangeminControllerDate: this.superviseForm.shouldPayRange[0] ? this.timeFormat(this.superviseForm.shouldPayRange[0]) : null,
            rangemaxControllerDate: this.superviseForm.shouldPayRange[1] ? this.timeFormat(this.superviseForm.shouldPayRange[1]) : null,
            branchtype: this.superviseForm.saleChannel
              ? this.superviseForm.saleChannel
              : null,
            appntname: this.superviseForm.appntName
              ? this.superviseForm.appntName
              : null,
            contno: this.superviseForm.applyNo
              ? this.superviseForm.applyNo
              : null,
            payyear: this.superviseForm.payCount
              ? this.superviseForm.payCount
              : null,
            payintv: this.superviseForm.pay ? this.superviseForm.pay : null,
            difficulty: this.superviseForm.payDifficult
              ? this.superviseForm.payDifficult - 1
              : null,
            rangeminprem: this.superviseForm.minFee
              ? this.superviseForm.minFee
              : null,
            rangemaxprem: this.superviseForm.maxFee
              ? this.superviseForm.maxFee
              : null,
            index: this.pageIndex,
            initflag: 1,
            pageSize: this.pageSize,
            selecttag: this.flagIndex, // 0是查全部
            selecttype: 1, //收费件
            postaladdress: this.superviseForm.postaladdress
              ? this.superviseForm.postaladdress
              : null,
            initqueryflag: params == 999 ? 0 : null,
            type: this.type,
            premorder: this.premorder,
            paytodateorder: this.paytodateorder
          };
          this.superviseForm.endTime && (obj.endTime = this.superviseForm.endTime)
          this.superviseForm.beginTime && (obj.beginTime = this.superviseForm.beginTime)
          this.pageObj = obj;
          this.api.getWorkListForOrphan(obj).then(res => {
            res.data = {
              "workbar": null,
              "basemap": null,
              "ipage": {
                "records": [
                  {
                    "planid": "1623201194867433473",
                    "contno": "0004035919471888",
                    "appntid": "0000789599",
                    "appntname": "何03",
                    "paytodate": "2020-07-31 00:00:00",
                    "payyear": 2,
                    "payyears": 10,
                    "payintv": "12",
                    "payintvname": "年交",
                    "difficulty": "0",
                    "paymoney": 885,
                    "restdays": -1063,
                    "appointeddate": "2023-02-08 00:00:00",
                    "worktype": "0",
                    "worktypename": "短信联系业务员",
                    "planstate": "0",
                    "planstatename": "未服务",
                    "workid": "1623201194888404993",
                    "agentcode": "61003766",
                    "agentcodename": "何dq",
                    "visitflag": "0",
                    "facerecordflag": "0"
                  },
                  {
                    "planid": "1589635612020948993",
                    "contno": "0001995117751888",
                    "appntid": "0000479586",
                    "appntname": "吴K1",
                    "paytodate": "2022-12-15 00:00:00",
                    "payyear": 3,
                    "payyears": 15,
                    "payintv": "12",
                    "payintvname": "年交",
                    "difficulty": "1",
                    "paymoney": 5995,
                    "restdays": -196,
                    "appointeddate": "2023-02-01 00:00:00",
                    "worktype": "1",
                    "worktypename": "电话联系业务员",
                    "planstate": "1",
                    "planstatename": "服务中",
                    "workid": "1620676116284043266",
                    "agentcode": "61002527",
                    "agentcodename": "卢fe",
                    "visitflag": "1",
                    "facerecordflag": "0"
                  }
                ],
                "total": "2",
                "size": "10",
                "current": "1",
                "orders": [],
                "searchCount": true,
                "pages": "1"
              }
            }
            if (res.code == 200 && res.data != null) {
              this.queryLoading = false;
              this.historyObj = null;
              if (res.data.ipage.total > 0) {
                this.total = res.data.ipage.total;
                this.chargeData = res.data.ipage.records;
                if (params != 999) {
                  this.$Message.info("查询成功");
                }
                this.chargeData.forEach(element => {
                  if (element.paytodate) {
                    element.paytodate = element.paytodate.substr(0, 10);
                  }
                  if (
                    element.payyear &&
                    element.payyears &&
                    element.payintvname
                  ) {
                    element.paycount =
                      element.payyear +
                      "/" +
                      element.payyears +
                      element.payintvname;
                  }
                  if (element.appointeddate) {
                    element.plandatetype = element.appointeddate.substr(0, 10);
                  }
                });
              } else {
                this.total = 0;
                this.chargeData = [];
                if (params != 999) {
                  this.$Message.info("查询数据为空");
                }
              }
            } else {
              this.queryLoading = false;
              this.total = 0;
              this.chargeData = [];
              if (params != 999) {
                this.$Message.info(res.msg);
              }
            }
          });
        } else {
          this.$Message.error("信息填写有误");
        }
      });
    },

    // 分页查询
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.api.getWorkListForOrphan(this.pageObj).then(res => {
        if (res.code == 200 && res.data != null) {
          if (res.data.ipage.total > 0) {
            this.total = res.data.ipage.total;
            this.chargeData = res.data.ipage.records;
            this.chargeData.forEach(element => {
              if (element.paytodate) {
                element.paytodate = element.paytodate.substr(0, 10);
              }
              if (element.payyear && element.payyears && element.payintvname) {
                element.paycount =
                  element.payyear +
                  "/" +
                  element.payyears +
                  element.payintvname;
              }
              if (element.appointeddate) {
                element.plandatetype = element.appointeddate.substr(0, 10);
              }
              if (element.agentname && element.agentcode) {
                element.agent = element.agentname + "-" + element.agentcode;
              }
            });
          } else {
            this.total = 0;
            this.chargeData = [];
            this.$Message.info("查询数据为空");
          }
        } else {
          this.total = 0;
          this.chargeData = [];
          this.$Message.info(res.msg);
        }
      });
    },

    // 重置表单
    handleReset() {
      this.$refs.superviseForm.resetFields();
      this.superviseForm = {
        workStatus: "",
        workPlanRange: ["", ""],
        workEndRange: ["", ""],
        PayableRange: ["", ""],
        saleChannel: "",
        appntName: "",
        applyNo: "",
        payCount: "",
        pay: "",
        payDifficult: "",
        minFee: "",
        maxFee: "",
        postaladdress: "",
        shouldPayRange: ["", ""]
      };
    },

    //点击按钮变绿，其他default
    clickButton(index) {
      this.flagIndex = index;
      let arr = [
        "default",
        "default",
        "default",
        "default",
        "default",
        "default"
      ];
      arr[index] = "primary";
      this.but = arr;
      this.handleSubmit(index, 999);
    },

    // 点击显示对话框
    adjust() {
      if (this.selectLength <= 0) {
        this.$Message.error("未选择计划，不可进行此操作");
        return;
      }
      let i = 0;
      this.selection.some(function (element) {
        if (element.planstatename == "已完成") {
          return true;
        } else {
          i++;
        }
      });
      if (i === this.selection.length) {
        this.adjustPlan = true;
      } else {
        this.$Message.info("计划中不能包含已完成的计划");
      }
    },

    // 计划提交
    adjustSubmit() {
      this.adjustLoading = true;
      let index = 0;
      this.selection.forEach(element => {
        let obj = {
          appointeddate: util.dateToISOString(
            this.adjustPlanForm.adjustPlanDate
          ),
          worktype: this.adjustPlanForm.workType,
          planid: element.planid
        };
        this.api.updateplan(obj).then(res => {
          if (res.code == 200 && res.data != null) {
            index++;
            if (index == this.selection.length) {
              this.adjustLoading = false;
              this.$Message.success(res.msg);
              this.adjustPlanForm = {
                adjustPlanDate: "",
                workType: ""
              };
              this.handleSubmit(0, 999);
            }
          } else {
            index++;
            this.$Message.info(res.msg);
            if (index == this.selection.length) {
              this.adjustLoading = false;
              this.adjustPlanForm = {
                adjustPlanDate: "",
                workType: ""
              };
              this.handleSubmit(0, 999);
            }
          }
        });
      });
    },

    // 点击关闭隐藏对话框
    modalVisibleChange(whether) {
      if (whether == false) {
        this.adjustPlan = false;
        this.adjustPlanForm = {
          adjustPlanDate: "",
          workType: ""
        };
      }
    },

    // 表格多选获取数据
    selectionChange(selection) {
      this.selection = selection;
      this.selectLength = selection.length;
    },

    // 批量处理跳转
    batchDeal() {
      if (this.selectLength <= 0) {
        this.$Message.error("未选择计划，不可进行此操作");
        return;
      }
      sessionStorage.setItem("QUERYOBJ", JSON.stringify(this.pageObj));
      sessionStorage.setItem("QUERYFORM", JSON.stringify(this.superviseForm));
      sessionStorage.setItem("INSURANCE_TYPE", "收费件");
      let i = 0;
      this.selection.some(function (element) {
        if (element.planstatename == "已完成") {
          return true;
        } else {
          i++;
        }
      });
      if (i === this.selection.length) {
        let selectionCopy = [];
        let j = 0;
        this.selection.forEach(element => {
          if (selectionCopy.includes(element.appntid)) {
            j++;
          } else {
            selectionCopy.push(element.appntid);
          }
        });
        console.log(j, this.selection.length);
        if (j === this.selection.length - 1) {
          this.$router.push({
            // name: "batchDeal",
            path: "batchDeal",
            query: {
              selection: this.selection,
              insuranceType: "charge"
            }
          });
        } else {
          this.$Message.info("批量处理中投保人编号必须相同");
        }
      } else {
        this.$Message.info("计划中不能包含已完成的计划");
      }
    },

    // 工作状态跳转
    forward(row) {
      sessionStorage.setItem("QUERYOBJ", JSON.stringify(this.pageObj));
      sessionStorage.setItem("QUERYFORM", JSON.stringify(this.superviseForm));
      sessionStorage.setItem("INSURANCE_TYPE", "收费件");
      if (row.planstatename == "已完成") {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            row: row,
            insuranceType: "charge"
          }
        });
      } else {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            selection: row,
            insuranceType: "charge"
          }
        });
      }
    },

    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageSubmit();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    },

    // 转化为两位小数
    decimalConversion(value) {
      let reg = /^[0-9][0-9]*$/;
      let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
      let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
      if (value) {
        if (reg.test(value)) {
          this.superviseForm.minFee = value + ".00";
        } else if (reg1.test(value)) {
          this.superviseForm.minFee = value + "0";
        } else if (reg2.test(value)) {
        } else {
          this.$refs.superviseForm.validateField("minFee");
        }
      } else {
        this.superviseForm.minFee = null;
      }
    },

    decimalConversion2(value) {
      let reg = /^[0-9][0-9]*$/;
      let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
      let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
      if (value) {
        if (reg.test(value)) {
          this.superviseForm.maxFee = value + ".00";
        } else if (reg1.test(value)) {
          this.superviseForm.maxFee = value + "0";
        } else if (reg2.test(value)) {
        } else {
          this.$refs.superviseForm.validateField("maxFee");
        }
      } else {
        this.superviseForm.maxFee = null;
      }
    },
    draw(ele, loginUser, loginTime) {
      let imageUrl = drawSign(ele, loginUser, loginTime)
      document.getElementsByClassName("ivu-table-fixed-body")[2].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-fixed-body")[2].classList.add("add-background")

      document.getElementsByClassName("ivu-table-fixed-body")[3].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-fixed-body")[3].classList.add("add-background")

      document.getElementsByClassName("ivu-table-body")[1].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-body")[1].classList.add("add-background")
    },
  },
  created() {
    if (sessionStorage.getItem("INSURANCE_TYPE") == "收费件") {
      if (sessionStorage.getItem("QUERYOBJ")) {
        // 二次筛选条件
        this.historyObj = JSON.parse(sessionStorage.getItem("QUERYOBJ"));
        this.type = this.historyObj.type;
        this.typeFlag = this.historyObj.type;
        this.flagIndex = this.historyObj.selecttag;
        this.premorder = this.historyObj.premorder;
        this.paytodateorder = this.historyObj.paytodateorder;
        let arr = [
          "default",
          "default",
          "default",
          "default",
          "default",
          "default"
        ];
        arr[this.flagIndex] = "primary";

        this.but = arr;
        this.pageIndex = this.historyObj.index;
        this.pageSize = this.historyObj.pageSize;

        // 单次查询条件
        this.superviseForm = JSON.parse(sessionStorage.getItem("QUERYFORM"));

        // 工作录入时间段
        this.superviseForm.shouldPayRange[0] = this.historyObj.rangeminControllerDate;
        this.superviseForm.shouldPayRange[1] = this.historyObj.rangemaxControllerDate;
        // 工作计划时间段
        this.superviseForm.workPlanRange[0] = this.historyObj.rangeminappointeddate;
        this.superviseForm.workPlanRange[1] = this.historyObj.rangemaxappointeddate;
        // 工作完成时间段
        this.superviseForm.workEndRange[0] = this.historyObj.rangeminfishdate;
        this.superviseForm.workEndRange[1] = this.historyObj.rangemaxfishdate;
        // 应交日时间段
        this.superviseForm.PayableRange[0] = this.historyObj.rangeminpaytodate;
        this.superviseForm.PayableRange[1] = this.historyObj.rangemaxpaytodate;
        // console.log(this.historyObj.selecttag);

        sessionStorage.removeItem("QUERYOBJ");
        sessionStorage.removeItem("QUERYFORM");
        // sessionStorage.removeItem("INSURANCE_TYPE");
      }
    }
  },
  mounted() {
    this.initial();
    let loginUser = sessionStorage.getItem("name");
    let loginTime =
      new Date().getFullYear() +
      "/" +
      (new Date().getMonth() + 1) +
      "/" +
      (new Date().getDate());
    this.draw(this.$refs.myCanvas, loginUser, loginTime)
  },
  beforeDestroy() {
    this.chargeData = [];
  }
};
</script>
<style lang="less">
@import "./index.less";

.ivu-modal-header {
  background-color: #2d8cf0;
}

.ivu-modal-close .ivu-icon-ios-close {
  color: #fff !important;
}
</style>
